<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>


<%@ include file="head.jsp"%>

<style>
	.text-danger {
		margin-top: 5px;
	}
</style>

<script type="text/javascript">

	var findchildrenurl = "${baseurl}/admin/type/findchildrentype";
	

	$(function(){
		//一级分类改变
		$(".typechangeone").change(function(){
			var id = $(this).val();
			var path =$(".typechangeone :checked").data("path") //attr
			
			//设置input框输入pid的值 和path的值
			$("#pid").val(id);
			$("#path").val(path);
			
			if(id != 0) {
				$.get(findchildrenurl , {"id" : id} , function(data , s , x){
					
					if(data.code == 0) {
						alert(data.msg);
						return;
					}
					
					//对二级分类的数据处理
					$("#twotype").html("");
					var htmlStr = '<option value="0">--请选择--</option>';
					$("#twotype").append(htmlStr);
					var list = data.data.list;
					for(var i in list) {
						var path =  list[i].path + list[i].id + "-";
						var str = '<option data-path="' + path + '" value="' + list[i].id + '">' + list[i].name + '</option>';
						$("#twotype").append(str);
					}
					
					//对三级分类的数据处理
					$("#threetype").html("");
					var htmlStr = '<option value="0">--请选择--</option>';
					$("#threetype").append(htmlStr);
				})
			} else {
				//对二级分类的数据处理
				$("#twotype").html("");
				var htmlStr = '<option value="0">--请选择--</option>';
				$("#twotype").append(htmlStr);
				
				//对三级分类的数据处理
				/* $("#threetype").html("");
				var htmlStr = '<option value="0">--请选择--</option>';
				$("#threetype").append(htmlStr); */
				
				
				//$("#form-group-typechangetwo").hide();
				//$("#form-group-typechangethree").hide();
				
			}
		})
		
		//二级分类改变
		$(".typechangetwo").change(function(){
			var id = $(this).val();
			
			
			
			if(id != 0) {
				
				var path =$(".typechangetwo :checked").data("path") //attr
				
				//设置input框输入pid的值 和path的值
				$("#pid").val(id);
				$("#path").val(path);
				
				/* $.get(findchildrenurl , {"id" : id} , function(data , s , x){
					$("#threetype").html("");
					var htmlStr = '<option value="0">--请选择--</option>';
					$("#threetype").append(htmlStr);
					var list = data.data.list;
					for(var i in list) {
						var str = '<option data-path="' + list[i].path + '" value="' + list[i].id + '">' + list[i].name + '</option>';
						$("#threetype").append(str);
					}
				}) */
			} else {
				//获取一级分类选择的值
				var id   = $(".typechangeone :checked").val();
				var path = $(".typechangeone :checked").data("path") //attr
				$("#pid").val(id);
				$("#path").val(path);
				
				//对三级分类的数据处理
				/* $("#threetype").html("");
				var htmlStr = '<option value="0">--请选择--</option>';
				$("#threetype").append(htmlStr); */
			}
		})
		
	})
</script>

<div class="row">
	<ol class="breadcrumb">
		<li><a href="${baseurl }/admin">首页</a></li>
		<li class=""><a href="${baseurl }/admin/typpe/list/1/0">博客管理</a></li>
		<li class="active">分类新增</li>
	</ol>
</div>

<div class="row">
	<form action="${baseurl }/admin/type/add"  class="col-md-6" method="post" enctype="multipart/form-data">
		<div class="form-group">
			<label for="name">分类名称</label> <input
				type="text" class="form-control" id="name" name="name"
				placeholder="请输入用户名" >
				<p class="text-danger"></p>
		</div>
		<div class="form-group">
			<label for="type">上级分类</label> 
				<select id="type" class="form-control typechangeone">
				  <option data-path="0-" value="0">顶级分类</option>
				  <c:forEach var="i" items="${onetype }">
				  	<option data-path="${i.path }${i.id}-" value="${i.id }">${i.name }</option>
				  </c:forEach>
				</select>
			
				<p class="text-danger"></p>
		</div>
		
		<div id="form-group-typechangetwo" class="form-group">
			<label for="twotype">二级分类</label> 
				<select class="form-control typechangetwo" id="twotype">
					<option value="0">--请选择--</option>
				</select>
				<p class="text-danger"></p>
		</div>
		
		<!-- <div id="form-group-typechangethree" class="form-group">
			<label for="username">三级分类</label> 
				<select class="form-control typechangethree" id="threetype">
					<option value="0">--请选择--</option>
				</select>
				<p class="text-danger"></p>
		</div> -->
		
		<div class="form-group">
			<label for="pid">父级id（PID）</label> <input
				type="number" class="form-control" id="pid" name="pid" value="0"
				 readonly="readonly">
				<p class="text-danger"></p>
		</div>
		
		<div class="form-group">
			<label for="path">父路径（PATH）</label> <input
				type="text" class="form-control" id="path" name="path" value="0-"
				 readonly="readonly">
				<p class="text-danger"></p>
		</div>
		
		
		<button type="submit" class="btn btn-success" id="adduser">提交</button>
		<button type="reset" class="btn btn-primary" >重置</button>
		<button type="button" class="btn btn-warning returnPage">返回</button>
	</form>
</div>


<%@ include file="footer.jsp"%>

